<template>
  <div class="article-audit">
    <el-table :data="articles" style="width: 100%" v-loading="loading">
      <el-table-column prop="title" label="标题" min-width="200" />
      <el-table-column prop="categoryName" label="分类" width="120" />
      <el-table-column prop="nickname" label="作者" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="{ row }">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleView(row)">查看</el-button>
          <el-button type="success" link @click="handleApprove(row)" v-if="row.status === 0">
            通过
          </el-button>
          <el-button type="danger" link @click="handleReject(row)" v-if="row.status === 0">
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="文章详情"
      width="800px"
    >
      <div class="article-detail">
        <h2>{{ currentArticle.title }}</h2>
        <div class="article-meta">
          <span>作者：{{ currentArticle.nickname }}</span>
          <span>分类：{{ currentArticle.categoryName }}</span>
          <span>发布时间：{{ formatDate(currentArticle.createTime) }}</span>
        </div>
        <div class="article-content" v-html="currentArticle.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { article } from '@/api'

const loading = ref(false)
const articles = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dialogVisible = ref(false)
const currentArticle = ref({})

const loadArticles = async () => {
  loading.value = true
  try {
    const res = await article.list({
      current: currentPage.value,
      size: pageSize.value,
      status: 0  // 0表示待审核
    })
    articles.value = res.records
    total.value = res.total
  } catch (error) {
    console.error(error)
    ElMessage.error('加载文章列表失败')
  } finally {
    loading.value = false
  }
}

const handleView = (row) => {
  currentArticle.value = row
  dialogVisible.value = true
}

const handleApprove = (row) => {
  ElMessageBox.confirm(
    '确定要通过这篇文章吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    }
  ).then(async () => {
    try {
      await article.updateStatus(row.id, 1)  // 1表示已发布
      ElMessage.success('审核通过')
      loadArticles()
    } catch (error) {
      console.error(error)
      ElMessage.error('操作失败')
    }
  }).catch(() => {
    // 用户取消操作，不做任何处理
  })
}

const handleReject = (row) => {
  ElMessageBox.confirm(
    '确定要拒绝这篇文章吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await article.updateStatus(row.id, 2)  // 2表示已拒绝
      ElMessage.success('已拒绝')
      loadArticles()
    } catch (error) {
      console.error(error)
      ElMessage.error('操作失败')
    }
  }).catch(() => {
    // 用户取消操作，不做任何处理
  })
}

const handleSizeChange = (val) => {
  console.log('修改每页显示条数:', val);
  pageSize.value = val;
  currentPage.value = 1; // 切换每页条数时，重置为第一页
  loadArticles();
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadArticles()
}

const getStatusType = (status) => {
  switch (status) {
    case 0: return 'warning'
    case 1: return 'success'
    case 2: return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status) => {
  switch (status) {
    case 0: return '待审核'
    case 1: return '已发布'
    case 2: return '已拒绝'
    default: return '未知'
  }
}

const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

onMounted(() => {
  loadArticles()
})
</script>

<style scoped>
.article-audit {
  background: white;
  padding: 20px;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.article-detail {
  padding: 20px;
}

.article-meta {
  color: #666;
  margin: 10px 0;
}

.article-meta span {
  margin-right: 20px;
}

.article-content {
  margin-top: 20px;
  line-height: 1.8;
}
</style> 